<template>
  <base-com>
    <div style="background:radial-gradient(white,#FFE4B5)">
      <div style="height:1280px;width:1720px;float:left;">
        <div id="container" style="height:1280px;width:1720px;"></div>
      </div>
      <div id="js-div">
        <div>
          <Button  type="primary" @click="reload">刷新</Button>
        </div>
        <textarea id="js-textarea" cols="280" rows="36" style= "background: transparent; border-style: none; ">{{logs_data}}</textarea>
      </div>

    </div>
  </base-com>
</template>

<script>

import { mapGetters,mapMutations,mapActions } from 'vuex'
import {
  getLogs,
  getTestData,
  getKlineData
} from '@/api/trade'
import BaseCom from "../../components/base-com/base-com";
import echarts from 'echarts'
export default {
  name: "data-log",
  components: {BaseCom},
  data(){
    return{
      clientSelected:'',
      contractSelected:'',
      logs_data:"还没有获取到日志",
      original_data:[],
      charts: '',
      newLogList:[],
    }
  },
  methods:{
    ...mapActions([
      'handleLogOut',
      'getListStrategypro',
    ]),
    ...mapGetters([
      'get_client',
      'get_contract',
    ]),
    ...mapMutations([
      'set_strategy_time',
      'set_list_strategy',
      'set_list_strategy_unrun',
      'set_list_strategy_run',
      'set_data_group_id_run',
      'set_data_group_id_unrun',
      'set_all_group',
      'set_run_group',
      'set_unrun_group'
    ]),
    get_Logs(){
      let params ={
        user_name:this.clientSelected,
        contract_type:this.contractSelected,
      };
      getLogs(params).then(res=>{
        if(res.data.code === 1000){
          var newText = ""
          for(var i =0 ;i<res.data.data.length; i++){
            newText += res.data.data[i] + "\n"
          }
          this.logs_data = newText

          this.newLogList = []
          if(res.data.data.length > 8){
            let lastIndex0 = res.data.data.length
            for(var i=7;i>=0;i--){
              this.newLogList.push(res.data.data[lastIndex0-i])
            }
          }else{
            this.newLogList = res.data.data
          }
          this.get_TestData()
        }else{
          this.$Message.error(res.data.msg);
        }
      })
        .catch((e) =>{
          this.$Message.error("业务异常");
        })
    },
    get_TestData(){
      let params ={
        user_name:this.clientSelected,
        contract_type:this.contractSelected,
      };
      getTestData(params).then(res=>{
        if(res.data.code === 1000){
          this.original_data = res.data.data

          this.loadEcharts(this.original_data)

        }else{
          this.$Message.error(res.data.msg);
        }
      })
        .catch((e) =>{

          this.$Message.error("业务异常");
        })
    },
    loadEcharts(data0){
      var fundingCharge = data0.fundingCharge
      var serviceCharge = data0.serviceCharge
      var cycleAmount = data0.cycleAmount
      var translationAmount = data0.translationAmount
      var marginBalanceList = data0.marginBalanceList
      var occupyMoneyList = data0.occupyMoneyList
      var occupyMoneyRateList = data0.occupyMoneyRateList
      var priceList = data0.priceList
      var buyBoomList = data0.buyBoomList
      var shortBoomList = data0.shortBoomList
      var bourseBoomList = data0.bourseBoomList
      var profitAndLossList = data0.profitAndLossList
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom);
      var app = {};
      var option;

      var dateList = priceList.map(function (item) {return item[0];});
      var priceLi = priceList.map(function (item) {return item[1];});
      var priceNew = priceLi[priceLi.length-1]
      var marginBalanceLi = marginBalanceList.map(function (item) {return item[1];});
      var marginBalanceNew = marginBalanceLi[marginBalanceLi.length-1]
      var occupyMoneyLi = occupyMoneyList.map(function (item) {return item[1];});
      var occupyMoneyNew = occupyMoneyLi[occupyMoneyLi.length-1]
      var occupyMoneyRateLi = occupyMoneyRateList.map(function (item) {return item[1];});
      var occupyMoneyRateNew = occupyMoneyRateLi[occupyMoneyRateLi.length-1]

      var dateList2 = buyBoomList.map(function (item) {return item[0];});
      var buyBoomLi = buyBoomList.map(function (item) {return item[1];});
      var buyBoomNew = buyBoomLi[buyBoomLi.length-1]
      var shortBoomLi = shortBoomList.map(function (item) {return item[1];});
      var shortBoomNew = shortBoomLi[shortBoomLi.length-1]
      var bourseBoomLi = bourseBoomList.map(function (item) {return item[1];});

      var bourseBoomNew = bourseBoomLi[bourseBoomLi.length-1]

      var straightUpLi = profitAndLossList.map(function (item) {return item[0];})
      var straightDownLi = profitAndLossList.map(function (item) {return item[1];})
      var cycleFilishLi = profitAndLossList.map(function (item) {return item[2];})
      var straightUpLiWithUnrun = profitAndLossList.map(function (item) {return item[3];})
      var straightDownLiWithUnrun = profitAndLossList.map(function (item) {return item[4];})
      var cycleFilishLiWithUnrun = profitAndLossList.map(function (item) {return item[5];})

      var startIndex = 0
      if(dateList.length > 50000){
        startIndex = 100 - (50000/dateList.length)*100
      }

      option = {
        dataZoom: [
          {
            type: 'inside',
            start: startIndex,
            end: 100,
            xAxisIndex: [0,1,2,3,4,5,6,7,8]
          },
          {
            show: true,
            type: 'slider',
            top: '90%',
            start: startIndex,
            end: 100,
            xAxisIndex: [0,1,2,3,4,5,6,7,8]
          }
        ],
        legend: {
          top: 220,
          right: 80,
          data: ['直涨','完全循环','直跌','直涨（含未启动）','完全循环（含未启动）','直跌（含未启动）']
        },
        title: [{
          top: 50,
          left: '20%',
          text: '价格：' + priceNew.toFixed(1)
        }, {
          top: 250,
          left: '20%',
          text: '权益：' + marginBalanceNew.toFixed(8)
        }, {
          top: 250,
          right: '20%',
          text: '直涨'
        }, {
          top: 450,
          left: '20%',
          text: '空单强平：'+shortBoomNew.toFixed(2)
        }, {
          top: 450,
          right: '20%',
          text: '完全循环'
        }, {
          top: 650,
          left: '20%',
          text: '多单强平：'+buyBoomNew.toFixed(2)
        }, {
          top: 650,
          right: '20%',
          text: '直跌'
        }, {
          top: 850,
          left: '20%',
          text: '交易所强平：' +bourseBoomNew.toFixed(2)
        }, {
          top: 850,
          right: '20%',
          text: '保证金率：'+occupyMoneyRateNew.toFixed(8)
        }, {
          top: 1050,
          right: '20%',
          text: '保证金：'+occupyMoneyNew.toFixed(8)
        }, {
          top: 10,
          left: 'left',
          text: '资金费：'+fundingCharge.toFixed(8)
        }, {
          top: 10,
          left: '20%',
          text: '手续费：'+serviceCharge.toFixed(8)
        }, {
          top: 10,
          left: '40%',
          text: '循环次数：'+cycleAmount.toFixed(0)
        }, {
          top: 10,
          left: '60%',
          text: '平移次数：'+translationAmount.toFixed(0)
        }],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: function (params) {
            // console.log(params)
            let res = '';
            for (let i = 0; i < params.length; i++) {
              // console.log(params[i].name, params[i].seriesName, params[i].value)
              var data = '<p>' + params[i].name + '</p>';
              res += '<p class="padding:15px 0;">' + params[i].marker + params[i].seriesName + '<span style="font-weight:900;float:right;padding-left:15px;">' + params[i].value + '</span>' + '</p>';
            }
            return data + res;
          }
        },
        axisPointer: {
          link: [
            {xAxisIndex: [2,3,4]},
            {xAxisIndex: [6,7,8]}
          ]
        },
        xAxis: [{
          data: dateList
        }, {
          data: dateList,
          gridIndex: 1
        }, {
          data: dateList2,
          gridIndex: 2
        }, {
          data: dateList2,
          gridIndex: 3
        }, {
          data: dateList2,
          gridIndex: 4
        }, {
          data: dateList,
          gridIndex: 5
        }, {
          data: dateList2,
          gridIndex: 6
        }, {
          data: dateList2,
          gridIndex: 7
        }, {
          data: dateList2,
          gridIndex: 8
        }, {
          gridIndex: 9,
          show:false
        }, {
          data: dateList,
          gridIndex: 10
        }],
        yAxis: [{
          min:'dataMin'
        }, {
          min:'dataMin',
          gridIndex: 1
        }, {
          min:'dataMin',
          gridIndex: 2
        }, {
          min:'dataMin',
          gridIndex: 3
        }, {
          min:'dataMin',
          gridIndex: 4
        }, {
          min:'dataMin',
          gridIndex: 5
        }, {
          min:'dataMin',
          max:'dataMax',
          gridIndex: 6
        }, {
          min:'dataMin',
          max:'dataMax',
          gridIndex: 7
        }, {
          min:'dataMin',
          max:'dataMax',
          gridIndex: 8
        }, {
          gridIndex: 9,
          show:false
        }, {
          min:'dataMin',
          gridIndex: 10
        }],
        grid: [
          {top: 50,width: '45%', left:80, height: 150, borderColor:'#000000',show: true},
          {top: 250,width: '45%', left:80, height: 150, borderColor:'#000000',show: true},
          {top: 450,width: '45%', left:80, height: 150, borderColor:'#000000',show: true},
          {top: 650,width: '45%', left:80, height: 150, borderColor:'#000000',show: true},
          {top: 850,width: '45%', left:80, height: 150, borderColor:'#000000',show: true},
          {top: 850,width: '45%', right:10, height: 150, borderColor:'#000000',show: true},
          {top: 250,width: '45%', right:10, height: 150, borderColor:'#000000',show: true},
          {top: 450,width: '45%', right:10, height: 150, borderColor:'#000000',show: true},
          {top: 650,width: '45%', right:10, height: 150, borderColor:'#000000',show: true},
          {top: 50,width: '45%', right:10, height: 150, borderColor:'#000000',show: true},
          {top: 1050,width: '45%', right:10, height: 150, borderColor:'#000000',show: true},
        ],
        series: [{
          type: 'line',
          name: '价格',
          showSymbol: false,
          data: priceLi,
          animation : false,
        }, {
          type: 'line',
          name: '权益',
          showSymbol: false,
          data: marginBalanceLi,
          animation : false,
          xAxisIndex: 1,
          yAxisIndex: 1
        }, {
          type: 'line',
          name: '空单强平',
          showSymbol: false,
          data: shortBoomLi,
          animation : false,
          xAxisIndex: 2,
          yAxisIndex: 2,
          itemStyle: {
            color: '#ff0000'
          }
        }, {
          type: 'line',
          name: '多单强平',
          showSymbol: false,
          data: buyBoomLi,
          animation : false,
          xAxisIndex: 3,
          yAxisIndex: 3,
          itemStyle: {
            color: '#00ff00'
          }
        }, {
          type: 'line',
          name: '交易所强平',
          showSymbol: false,
          data: bourseBoomLi,
          animation : false,
          xAxisIndex: 4,
          yAxisIndex: 4
        }, {
          type: 'line',
          name: '保证金率',
          showSymbol: false,
          data: occupyMoneyRateLi,
          animation : false,
          xAxisIndex: 5,
          yAxisIndex: 5
        }, {
          type: 'line',
          name: '直涨',
          showSymbol: false,
          data: straightUpLi,
          animation : false,
          xAxisIndex: 6,
          yAxisIndex: 6
        }, {
          type: 'line',
          name: '直涨（含未启动）',
          showSymbol: false,
          data: straightUpLiWithUnrun,
          animation : false,
          xAxisIndex: 6,
          yAxisIndex: 6
        }, {
          type: 'line',
          name: '完全循环',
          showSymbol: false,
          data: cycleFilishLi,
          animation : false,
          xAxisIndex: 7,
          yAxisIndex: 7
        }, {
          type: 'line',
          name: '完全循环（含未启动）',
          showSymbol: false,
          data: cycleFilishLiWithUnrun,
          animation : false,
          xAxisIndex: 7,
          yAxisIndex: 7
        }, {
          type: 'line',
          name: '直跌',
          showSymbol: false,
          data: straightDownLi,
          animation : false,
          xAxisIndex: 8,
          yAxisIndex: 8
        }, {
          type: 'line',
          name: '直跌（含未启动）',
          showSymbol: false,
          data: straightDownLiWithUnrun,
          animation : false,
          xAxisIndex: 8,
          yAxisIndex: 8
        },{
          type: 'scatter',
          symbolSize: 1,
          xAxisIndex: 9,
          yAxisIndex: 9,
          data: [{
            value: [0, 0],
            label: {
              normal: {
                show: true,
                formatter: this.newLogList.join('\n'),
                backgroundColor: '#eee',
                borderColor: '#333',
                borderWidth: 2,
                color: '#000',
                fontSize: 14,
                shadowBlur: 3,
                shadowColor: '#888',
                lineHeight: 18,
                align:'left',
                position:'top',
                width:810,
                height:150,
                offset:[0,5]
              }
            }
          }]
        }, {
          type: 'line',
          name: '保证金',
          showSymbol: false,
          data: occupyMoneyLi,
          animation : false,
          xAxisIndex: 10,
          yAxisIndex: 10
        }]
      };

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },
    // get_KlineData(){
    //   let params ={
    //     user_name:this.clientSelected,
    //     contract_type:this.contractSelected,
    //   };
    //   getKlineData(params).then(res=>{
    //     if(res.data.code === 1000){
    //       this.original_data = res.data.data
    //       this.loadKlineEcharts(this.original_data)
    //     }else{
    //       this.$Message.error(res.data.msg);
    //     }
    //   })
    //     .catch((e) =>{
    //       this.$Message.error("业务异常");
    //     })
    // },
    loadKlineEcharts(data0){
      var cycleAmount = data0.cycleAmount
      var klineList = data0.klineData
      var pointListTemp = data0.pointData
      var points = new Array();
      for(var i=0;i<pointListTemp.length;i++){
        var point0 = pointListTemp[i]
        var colorTmp = {color:'#3399ff'}
        if(point0[3]==1){
          colorTmp = {color:'#8B6914'}
        }
        points[i] = {name : point0[2], value : point0[1], xAxis: point0[0], yAxis: point0[1],itemStyle:colorTmp}
      }

      var dom = document.getElementById("container2");
      var myChart = echarts.init(dom);
      var app = {};
      var option;

      var startIndex = 0
      if(klineList.length > 50000){
        startIndex = 100 - (50000/klineList.length)*100
      }

      var upColor = '#00da3c';
      var upBorderColor = '#008F28';
      var downColor = '#ec0000';
      var downBorderColor = '#8A0000';

      option = {
        dataZoom: [
          {
            type: 'inside',
            start: startIndex,
            end: 100
          },
          {
            show: true,
            type: 'slider',
            top: '90%',
            start: startIndex,
            end: 100
          }
        ],
        grid: {
          top: 20,
          left: 20,
          right: 20,
          bottom: 100,
          containLabel: true
        },
        title: {
          text: '循环次数：'+cycleAmount,
          left: 0
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['1分钟K线']
        },
        xAxis: {
          type: 'time',
          scale: true,
          boundaryGap: false,
          axisLine: {onZero: false},
          splitLine: {show: false},
          splitNumber: 20,
          min: 'dataMin',
          max: 'dataMax'
        },
        yAxis: {
          scale: true,
          splitArea: {
            show: true
          }
        },
        series: [
          {
            name: '1分钟K线',
            type: 'candlestick',
            data: klineList,
            itemStyle: {
              color: upColor,
              color0: downColor,
              borderColor: upBorderColor,
              borderColor0: downBorderColor
            }
            ,
            markPoint: {
              label: {
                normal: {
                  formatter: function (param) {
                    return param != null ? param.name : '';
                  }
                }
              },
              data: points,
              tooltip: {
                formatter: function (param) {
                  return param.name + '<br>' + (param.data.coord || '');
                }
              }
            }
          }
        ]
      };

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },
    reload(){
      if(this.clientSelected!=="" && this.contractSelected !== ""){
        this.get_Logs()
        // this.get_TestData()
        this.$Message.success('刷新成功');
      }
    }
  },
  created() {
    this.clientSelected = this.get_client();
    this.contractSelected = this.get_contract();
    console.log(this.clientSelected)
    console.log(this.contractSelected)
    if(this.clientSelected!=="" && this.contractSelected !== ""){
      this.get_Logs()
      // this.get_KlineData()
    }
  },
  computed: {
    computed_client(){   //vux要监听对象
      return this.get_client()
    },
    computed_contract(){
      return this.get_contract()
    },
  },
  watch:{
    computed_client(){
      this.clientSelected = this.get_client();
    },
    computed_contract(){
      this.contractSelected = this.get_contract()
    },
  }
}

</script>

<style scoped>

</style>
